<template>
  <div>
    <div class="web-list" v-if="webList.length > 0">
      <h2>常用网站</h2>
      <div class="web-type">
        <div v-for="(x, y) in webList" :key="y" @click="selectWebType(y)" :class="webType == y ? 'active' : ''">
          {{ x.title }}
        </div>
      </div>
      <div class="web-content">
        <div v-for="(x, y) in webList[webType].children" :key="y" @click="goToLink(x)">
          {{ x.title }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { queryData } from '@/apis/mysql'
import global from '@/utils/global';
import system from '@/utils/system';
const webList = ref([])
const webType = ref(0)
const finished = ref(false)
function getWebList() {
  finished.value = false
  queryData({
    table: 'links',
    data: {},
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    const arr = global.arrayToTree(res.data, "pid", 0)
    webList.value = arr
  })
}
function selectWebType(y){
  webType.value = y
}
onMounted(() => {
  getWebList()
})

function goToLink(x) {
  system.openWeb(x.href)
}

</script>
<style lang="scss" scoped>
.web-list {
  margin-top: 10px;

  .web-type {
    width: 722px;
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    border: 1px solid #fff;

    >div {
      width: 120px;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      text-align: center;
    }

    .active {
      background-color: #1889fa;
      color: #fff;
    }
  }

  .web-content {
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 120px;
      margin: 10px;
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>
